<template>
	<div class="content">
		<div class="contentTitle">请使用手机号登录</div>
		<div class="memberphone">
			<div class="memberItTi">手机号</div>
			<input class="memberItIn" type="number" placeholder-class="inputPlaceHold" v-model="formData.phone"
				placeholder="输入11位手机号码" maxlength="11" @input="inputChange" id="phone" />
		</div>
		<div class="memberphone">
			<div class="memberItTi">验证码</div>
			<input class="memberItIn" type="number" placeholder-class="inputPlaceHold" v-model="formData.code"
				placeholder="输入6位数字验证码" maxlength="6" @input="inputChange" id="code" />
			<!-- 展示默认灰色按钮：1无效手机号 2已经发生验证码，且处于倒计时状态-->
			<button class="btOne btCode" :class="{'btDefalt': !isPhone || !canSendCode}" @click="sendCode">
				{{canSendCode? '获取验证码' : `${time}秒内有效`}}</button>
		</div>
		<div class="memberphone memberBottom">
			<button class="btOne btLogin" :class="{'btDefalt': !isLogin}" @click="loginIn">登录</button>
		</div>
		<div class="user-enter" v-if="0" @click="switchUser">切换到用户首页</div>
	</div>
</template>

<script>
	import config from '../../static/config.js'
	import util from '../../static/utils/util.js'
	export default {
		data() {
			return {
				images: config.images,
				localImages: config.localImages,
				title: '123',
				formData: {
					phone: '1897312092',
					code: '011010',
				},
				isPhone: false,
				isLogin: false,
				canSendCode: true,
				time: 0,
			}
		},

		watch: {
			formData: {
				handler(val, oldVal) {
					// console.log('formData',val,oldVal)
					if (val.phone.length == 11 && val.code.length == 6) {
						this.isLogin = true;
					} else {
						this.isLogin = false;
					}
				},
				deep: true
			}
		},

		onLoad() {
			// getApp().autoLogin();
		},
		methods: {
			async inputChange(e) {
				// console.log(e)
				var value = e.detail.value;
				var key = e.currentTarget.id;
				if (key == 'phone') {
					//校验11位手机号
					if (value.length == 11 && util.checkPhoneNum(this.formData.phone)) {
						this.isPhone = true;
					} else {
						this.isPhone = false;
					}
				}
			},
			async sendCode() {
				var phone = this.formData.phone;
				//校验11位手机号
				if (util.checkPhoneNum(this.formData.phone) && this.canSendCode) {
					var url = '/passport/validateCode'
					var params = {
						phone: phone,
						smsType: "2"
					}
					var options = {
						url,
						params,
					}
					var param = await util.requestPro(options)
					this.canSendCode = false
					// 倒计时开始
					this.time = 60
					var timeInterval = setInterval(() => {
						this.time--;
						if (this.time <= 0) {
							this.canSendCode = true;
							clearInterval(timeInterval)
						}
					}, 1000)
				}
			},
			async loginIn() {
				var {
					phone,
					code
				} = this.formData;
				//校验11位手机号+验证码
				if (this.isLogin) {
					var url = '/passport/login'
					var params = {
						phone: phone,
						validateCode: code,
					}
					var options = {
						url,
						params,
					}
					var param = await util.requestPro(options)
					console.log('result', param.result)
					uni.setStorageSync('token', param.result.token)
					uni.setStorageSync('userInfo', param.result)
					uni.setStorageSync('phone', phone)
					this.returnMain()
				}
			},
			returnMain() {
				wx.switchTab({
					url: '/pages/index/index'
				})
			},

			switchUser() {
				wx.clearStorage().then(() => {
					this.returnMain()
				})
			},

			//0.3s内双击
			doubleClick() {
				var now = new Date();
				if (now - this.previous < 300) {
					this.showModal = true
				}
				this.previous = now;
			},
			confirm() {
				if (this.secrect == '666') {
					// this.showModal = false
					wx.navigateTo({
						url: '/pages/index/test',
					})
				} else {
					wx.showToast({
						title: '密码错误',
						icon: 'none',
					})
				}
			},
			cancel() {
				console.log('cancel')
				this.showModal = false
			},


			//获取用户手机号码
			async getPhoneNumber(userInfo) {
				let self = this;
				console.warn('userInfo', userInfo);
				var phoneInfo = userInfo.detail
				if (!phoneInfo.iv) {
					wx.showToast({
						title: '请允许授权登录',
						icon: 'none',
						duration: 1000
					})
					return
				}
				wx.removeStorageSync('token') //移除token
				var res = await self.wxLogin();
				var jsCode = res.code
				var url = '/UserServer/weChat/getWxUserOpenId'
				var url = '/UserServer/mini/install/getWxUserOpenId'
				var params = {
					encryptedData: phoneInfo.encryptedData,
					iv: phoneInfo.iv,
					js_code: jsCode
				}
				var options = {
					url,
					params
				}
				var param = await util.requestPro(options)
				console.log('param', param)
				if (param) {
					var phoneNumber = param.phoneNumber;
					// var phoneNumber=18570375317;//测试登录手机号
					if (phoneNumber) {
						wx.setStorageSync('phone', phoneNumber);
						wx.navigateTo({
							url: '/pages/index/select'
						})
					} else if (param.statusCode == 200) {
						console.log('param', param.statusCode == 200)
						wx.showToast({
							title: '请重新获取手机号',
							icon: 'none'
						})
					}
				}
			}

		},

	}
</script>

<style>
	page {
		background: #fff;
	}

	.content {
		display: flex;
		flex-direction: column;
		padding: 30rpx 30rpx 30rpx 30rpx;

	}

	.contentTitle {
		font-size: 36rpx;
		font-weight: bold;
		padding: 0rpx 0rpx 20rpx 0rpx;
	}


	.memberphone {
		display: flex;
		padding: 60rpx 0rpx 20rpx 0rpx;
		margin: 0rpx 30rpx 0rpx 30rpx;
		line-height: 44rpx;
		font-size: 28rpx;
		border-bottom: 1rpx solid #ccc;
	}

	.memberphone.memberBottom {
		border-bottom: 1rpx solid transparent;
	}

	.memberItTi {
		/* width: 150rpx; */
		color: #333333;
		margin-right: 40rpx;
		height: 44rpx;
		white-space: nowrap;
		/* border: 1rpx solid #f00; */
	}


	.memberItIn {
		/* border: 1rpx solid #0f0; */
	}

	.btCode.isEnable {}

	.btCode {
		line-height: 60rpx;
		font-size: 28rpx;
	}

	.btLogin {
		width: 100%;
	}

	.login .active {
		background: linear-gradient(270deg,
				rgba(120, 53, 255, 1) 0%,
				rgba(100, 232, 255, 1) 100%,
				rgba(42, 191, 211, 1) 100%,
				rgba(42, 191, 211, 1) 100%);
	}

	.user-enter {
		margin-left: auto;
		margin-top: 30rpx;
		margin-right: 30rpx;
		color: #333333;
		border-bottom: 1rpx solid #333333;
	}
</style>
